// 可以通用的scss
@import "./common.scss";

#page-loading {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    background-color: rgba(0, 0, 0, .2);
    display: none;

    .loader {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 1;
        width: 60px;
        height: 60px;
        transform: translate3d(-50%, -50%, 0);

        .loader-block {
            position: absolute;
            top: 0;
            left: 0;
            display: inline-block;
            opacity: 0;
            width: 27.27275%;
            height: 27.27275%;
            background: #fdfdfd;
            -webkit-animation: show 0.88s step-end infinite alternate, pulse 0.88s linear infinite alternate;
            animation: show 0.88s step-end infinite alternate, pulse 0.88s linear infinite alternate;
        }

        .loader-block:nth-child(1) {
            -moz-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
            -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
            -webkit-animation-delay: 0.065s;
            animation-delay: 0.065s;
        }

        .loader-block:nth-child(2) {
            -moz-transform: translate(122.23443%, 0);
            -ms-transform: translate(122.23443%, 0);
            -webkit-transform: translate(122.23443%, 0);
            transform: translate(122.23443%, 0);
            -webkit-animation-delay: 0.13s;
            animation-delay: 0.13s;
        }

        .loader-block:nth-child(3) {
            -moz-transform: translate(244.46890%, 0);
            -ms-transform: translate(244.46890%, 0);
            -webkit-transform: translate(244.46890%, 0);
            transform: translate(244.46890%, 0);
            -webkit-animation-delay: 0.195s;
            animation-delay: 0.195s;
        }

        .loader-block:nth-child(4) {
            -moz-transform: translate(0, 122.23443%);
            -ms-transform: translate(0, 122.23443%);
            -webkit-transform: translate(0, 122.23443%);
            transform: translate(0, 122.23443%);
            -webkit-animation-delay: 0.325s;
            animation-delay: 0.325s;
        }

        .loader-block:nth-child(5) {
            -moz-transform: translate(122.23443%, 122.23443%);
            -ms-transform: translate(122.23443%, 122.23443%);
            -webkit-transform: translate(122.23443%, 122.23443%);
            transform: translate(122.23443%, 122.23443%);
            -webkit-animation-delay: 0.13s;
            animation-delay: 0.13s;
        }

        .loader-block:nth-child(6) {
            -moz-transform: translate(244.46890%, 122.23443%);
            -ms-transform: translate(244.46890%, 122.23443%);
            -webkit-transform: translate(244.46890%, 122.23443%);
            transform: translate(244.46890%, 122.23443%);
            -webkit-animation-delay: 0.455s;
            animation-delay: 0.455s;
        }

        .loader-block:nth-child(7) {
            -moz-transform: translate(0, 244.46890%);
            -ms-transform: translate(0, 244.46890%);
            -webkit-transform: translate(0, 244.46890%);
            transform: translate(0, 244.46890%);
            -webkit-animation-delay: 0.39s;
            animation-delay: 0.39s;
        }

        .loader-block:nth-child(8) {
            -moz-transform: translate(122.23443%, 244.46890%);
            -ms-transform: translate(122.23443%, 244.46890%);
            -webkit-transform: translate(122.23443%, 244.46890%);
            transform: translate(122.23443%, 244.46890%);
            -webkit-animation-delay: 0.26s;
            animation-delay: 0.26s;
        }

        .loader-block:nth-child(9) {
            -moz-transform: translate(244.46890%, 244.46890%);
            -ms-transform: translate(244.46890%, 244.46890%);
            -webkit-transform: translate(244.46890%, 244.46890%);
            transform: translate(244.46890%, 244.46890%);
        }
    }
}

@-webkit-keyframes pulse {
    from, 40% {
        background: #fdfdfd;
    }
    to {
        background: #d9d9d9;
    }
}

@-webkit-keyframes show {
    from, 40% {
        opacity: 0;
    }
    41%, to {
        opacity: 1;
    }
}

@keyframes pulse {
    from, 40% {
        background: #fdfdfd;
    }
    to {
        background: #d9d9d9;
    }
}

@keyframes show {
    from, 40% {
        opacity: 0;
    }
    41%, to {
        opacity: 1;
    }
}

.cp {
    cursor: pointer
}

.disabled {
    cursor: not-allowed;
}

.inline-menu-box {

    .ant-menu {
        background-color: transparent;
        color: $cor0;
    }

    .ant-menu-inline.ant-menu-sub {
        background-color: $bg9;
    }

    .ant-menu-item:active, .ant-menu-submenu-title:active {
        background-color: transparent;
    }

    .ant-menu-vertical .ant-menu-item,
    .ant-menu-vertical-left .ant-menu-item,
    .ant-menu-vertical-right .ant-menu-item,
    .ant-menu-inline .ant-menu-item,
    .ant-menu-vertical .ant-menu-submenu-title,
    .ant-menu-vertical-left .ant-menu-submenu-title,
    .ant-menu-vertical-right .ant-menu-submenu-title,
    .ant-menu-inline .ant-menu-submenu-title {
        margin-bottom: 0;
        margin-top: 0;
    }

    .ant-menu-vertical .ant-menu-item:not(:last-child),
    .ant-menu-vertical-left .ant-menu-item:not(:last-child),
    .ant-menu-vertical-right .ant-menu-item:not(:last-child),
    .ant-menu-inline .ant-menu-item:not(:last-child) {
        margin-bottom: 0;
    }

    .ant-menu-inline .ant-menu-item, .ant-menu-inline .ant-menu-submenu-title {
        width: 100%;
    }

    .ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow:before,
    .ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow:before,
    .ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow:before,
    .ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow:before,
    .ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow:after,
    .ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow:after,
    .ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow:after,
    .ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow:after {
        background-color: #fff;
        background-image: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,1)), to(rgba(255,255,255,1)));
        background-image: -webkit-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,1));
        background-image: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,1));
    }

    .ant-menu-submenu-vertical > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:after,
    .ant-menu-submenu-vertical-left > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:after,
    .ant-menu-submenu-vertical-right > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:after,
    .ant-menu-submenu-inline > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:after,
    .ant-menu-submenu-vertical > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:before,
    .ant-menu-submenu-vertical-left > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:before,
    .ant-menu-submenu-vertical-right > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:before,
    .ant-menu-submenu-inline > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:before {
        background: -webkit-gradient(linear, left top, right top, from(#1890ff), to(#1890ff));
        background: -webkit-linear-gradient(left, #1890ff, #1890ff);
        background: linear-gradient(to right, #1890ff, #1890ff);
    }

    .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
        background-color: #1890ff;
        color: $cor0;
    }

    .ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left {
        //border-right-color: transparent;
        border: 0;
    }

    .ant-menu-vertical .ant-menu-item:after,
    .ant-menu-vertical-left .ant-menu-item:after,
    .ant-menu-vertical-right .ant-menu-item:after,
    .ant-menu-inline .ant-menu-item:after {
        border-right: 0;
    }

}